<!DOCTYPE HTML>
<html class="x-admin-sm">
<head>
  <th:block th:insert="head/head :: common_head"></th:block>
  <style>
    .layui-table-body .layui-table-main tbody tr {
      height: 90px;
      line-height: 90px;
    }
    .layui-table-cell{
      text-align:center;
      height: auto;
      white-space: normal;
    }
    .layui-table qr{
      max-width:120px
    }
  </style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <table class="layui-table layui-form" id="query_tb" lay-filter="query_tb"></table>
          <div id="laypage"></div>
        </div>
      </div>
    </div>
  </div>
</div>

  <th:block th:insert="head/head :: common_jsfiles"></th:block>
  <script>
    /**
     * sessionStorage的时候，cxtj_session 这个参数名称，每个页面不要重复，用于缓存查询条件的值，返回页面时候需要
     * 查询页面逻辑：query_data调用post_json_table(url+"query","","数据加载中...",renderTable)
     *
     */
    //后端地址
    var zbid = "[[${zbid}]]";
    var url = "[[${serverUrl}]]/stamp/ordermx/";
    //图片显示
    var url1 = "[[${serverUrl}]]/stamp/tp/";
    //每页默认大小
    var pagesize = 10;
    //当前第几页
    var curpage = 1;
    //查询条件缓存的键值名称
    var cxtj_session="stamp_ordermx_cxtj";
    //界面渲染
    layui.use(['table','laypage','form'], function(){
      var table = layui.table,
              form = layui.form,
              laypage = layui.laypage;

      //渲染table
      var renderTable = function(tbData){
        console.info("tbData:"+JSON.stringify(tbData));

        table.render({
          data: tbData.cxjg.listInfo,
          defaultToolbar: ['filter'],
          toolbar: ['<p>',
            '',
            '</p>'].join(''),
          elem: '#query_tb',
          height: 'full-173',
          page:false,
          limit: pagesize,
          even: true,
          cols: [
            [
              {field:'checkbox',align: 'center',width:'5%',title:'<input type=\'checkbox\' name=\'siam_all\' title=\'\' lay-skin=\'primary\' lay-filter=\'ck_all\'>',templet:function (d){
                  return '<input type="checkbox" name="ck_id" value="'+d.id+'" lay-skin="primary" title=" ">';
                }},
              {field: 'id', title: '序号',width:'10%',templet(d){
                  return d.id
                }},
              {field: 'id', title: '活动名称',width:'10%',templet(d){
                return d.stampCard.stampHd.name
                }},
              {field: 'id', title: '用户昵称',width:'10%',templet(d){
                  return d.tHyxx.name
                }},
              {field: 'stampCardId', title: '图片',width:'10%',templet(d){
                  var dz = url1+"wdzp_htzs?id="+d.stampCard.id+"&token="+localStorage.getItem("token");
                  return "<image class='qr' src="+dz+"></image>\n<span style=\"cursor: pointer\" onclick=\"xztp('"+d.id+"')\">[下载图片]</span>";
                }},
              {field: 'sl', title: '数量',width:'10%'},
              {field: 'hj', title: '合计',width:'10%'},
              {field: 'id', title: '收件人',width:'10%',templet(d){
                  return d.stampCardOrder.lxr
                }},
              {field: 'id', title: '手机尾号',width:'10%',templet(d){
                  return d.stampCardOrder.lxdhJsm
                }},
              {field: 'id', title: '地址',templet(d){
                  return d.stampCardOrder.fullDz
                }},
              {field: 'zhxzrq', title: '下载日期',width:'10%'},
              {field: 'zhxzrz', title: '下载日志',width:'10%'},
            ]
          ],
          done: function(res, curr, count){
            var zsl=0;
            if (!is_null(tbData.cxjg.pageInfo)) zsl = tbData.cxjg.pageInfo.total;
            //执行一个laypage实例
            laypage.render({
              elem:'laypage'
              ,count:zsl
              ,curr:curpage
              ,limit:pagesize
              ,limits: [10, 20, 30, 40]
              ,layout: ['prev', 'page', 'next', 'skip','count','limit']
              ,jump:function (obj,first) {
                if(!first){
                  curpage = obj.curr;
                  pagesize = obj.limit;
                  query_data();
                }
              }
            });
            //渲染提示？
          }
        });
      }

      /* 表格内容里面的工具条点击事件 */
      table.on('tool(query_tb)', function (obj) {
        if ('gxzt' === obj.event) {
          if(!is_null(obj.data.tWxOrder))
          {
            gxzt(obj.data.tWxOrder.sendOutTradeNo)
          }else{
            alert("该订单并未生成微信支付订单！");
            return false;
          }
        }
        if ('tk' === obj.event) {
          if(!is_null(obj.data.tWxOrder))
          {
            tk(obj.data.id)
          }else{
            alert("该订单并未生成微信支付订单！");
            return false;
          }
        }
      });
      table.on('toolbar(query_tb)', function (obj) {
        if ('add' === obj.event) { // 添加
          set_query_json();
          xadmin.goto('添加数据','info?lx=0');
        } else if ('zip' === obj.event) {
          set_query_json();
          // /* 表格头部的工具栏点击事件 */
          var ids = "";
          $.each($("input[name=ck_id]:checked"), function (i, value) {
            ids += $(this).attr("value")+",";  // 如果需要获取其他的值 需要在模板中把值放到属性中 然后这里就可以拿到了
          });
          if (ids==""){
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
          }
          to_zip({ids: ids});
        }
      });
      //全选
      form.on("checkbox(ck_all)", function () {
        var status = $(this).prop("checked");
        $.each($("input[name=ck_id]"), function (i, value) {
          $(this).prop("checked", status);
        });
        form.render();
      });
      //数据查询
      function query_data(){
        //如果有缓存，用缓存查询一次，然后清空缓存！
        let str = sessionStorage.getItem(cxtj_session);
        if (!is_null(str)){
          let str_json = JSON.parse(str);
          $("#sfxz").val(str_json.sfxz);
          $("#xmxx").val(str_json.xmxx);
          $("#sjh").val(str_json.sjh);
          curpage=str_json.curpage;
          pagesize=str_json.pagesize;
          sessionStorage.setItem(cxtj_session,"");
        }
        //调用查询接口，准备发送的参数
        var xmxx= $("#xmxx").val();
        if (is_null(xmxx)) xmxx="";
        let jsonData = {
          sfxz: $("#sfxz").val(),
          xmxx:xmxx,
          sjh: $("#sjh").val(),
          curpage: curpage,
          pagesize: pagesize,
          zbid:zbid,
          timestamp:new Date().getTime()
        };
        //查询参数加密
        let sendStr = {
          data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
        };
        //开始查询
        post_json_table(url+"query",JSON.stringify(sendStr),"数据加载中...",renderTable);
      }

      //监听查询按钮事件
      $(document).on('click', '[lay-event]', function(obj){
        var eventName = $(this).attr('lay-event'); // 获取事件名称
        if(eventName === 'query'){
          curpage=1;
          query_data();
          return false;
        }
      });

      //执行查询
      query_data();

    });
    //保存查询条件到缓存
    function set_query_json(){
      let jsonData = {
        sfxz: $("#sfxz").val(),
        xmxx: $("#xmxx").val(),
        sjh: $("#sjh").val(),
        curpage: curpage,
        pagesize: pagesize,
        timestamp:new Date().getTime()
      }
      sessionStorage.setItem(cxtj_session,JSON.stringify(jsonData));
    }
    //下载图片
    function xztp(id) {
      window.open(url+"xztp?id="+id+"&token="+localStorage.getItem("token")+"", '_blank');
    }
    //zip
    function to_zip(obj) {
      var ids;
      if (obj.ids) {  // 批量删除
        ids = obj.ids;
      }
      if(!confirm("是否确定打包下载图片？")) return;
      var jsonData = {
        ids: ids,
        token:localStorage.getItem("token")
      };
      var sendStr = {
        data:encrypt_str(JSON.stringify(jsonData),localStorage.getItem("a"),localStorage.getItem("b"))
      };
      post_json_token_download(url+"zip",JSON.stringify(sendStr),"数据打包中...");
    }
    //回调
    function on_result(result)
    {
      if (result.code==0)
      {
          window.location.reload();
      }
      else if (result.code==7)
      {
        layer.msg("打包完成，准备下载中", { time: 2000 }, function() {
          window.open(url+"xzzip?id="+result.data+"&token="+localStorage.getItem("token")+"", '_blank');
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
      else if (result.code==9)
      {
        layer.msg(result.msg, { time: 2000 }, function() {
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
      else
      {
        layer.msg(result.msg, { time: 2000 }, function() {
          window.location.reload();
        });//失败时只提示信息，不关闭弹出层且不刷新父页
      }
    }

  </script>
</body>
</html>